<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row spannel_list">
        <div class="col-sm-3 col-xs-6">
          <div class="spannel">
            <em>10015</em>
            <span>篇</span>
            <b>总文章数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor01">
            <em>123</em>
            <span>篇</span>
            <b>日新增文章数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor02">
            <em>35</em>
            <span>条</span>
            <b>评论总数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor03">
            <em>123</em>
            <span>条</span>
            <b>日新增评论数</b>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row curve-pie">
        <div class="col-lg-8 col-md-8">
          <div class="gragh_pannel" id="curve_show"></div>
        </div>
        <div class="col-lg-4 col-md-4">
          <div class="gragh_pannel" id="pie_show"></div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="column_pannel" id="column_show"></div>
    </div>

    <!-- 折线图 -->

    <!-- 环形图 -->
    <script>
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('pie_show'))

      option1 = {
        title: {
          left: 'center',
          text: '分类文章数量比',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'horizontal',
          x: 'center',
          data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
          top: 30,
        },
        color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
        series: [
          {
            name: '分类名称',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold',
                },
              },
            },
            data: [
              { value: 335, name: '爱生活' },
              { value: 310, name: '趣美味' },
              { value: 234, name: '爱旅行' },
              { value: 135, name: '爱电影' },
              { value: 548, name: '爱游泳' },
            ],
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1)
    </script>
    <!-- 柱状图 -->
    <script>
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById('column_show'))

      option2 = {
        title: {
          left: 'center',
          text: '分类访问量',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
          top: 30,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
        series: [
          {
            name: '爱生活',
            type: 'bar',
            data: [320, 332, 301, 334],
          },
          {
            name: '趣美味',
            type: 'bar',
            data: [220, 132, 101, 134],
          },
          {
            name: '爱旅行',
            type: 'bar',
            data: [220, 182, 191, 234],
          },
          {
            name: '爱电影',
            type: 'bar',
            data: [150, 232, 201, 154],
          },
          {
            name: '爱游泳',
            type: 'bar',
            data: [262, 118, 364, 426],
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2)
    </script>
    <!-- 导入url地址 -->
    <script src="./utils/urls.js"></script>
    <!-- 导入自己的js -->
    <script src="./js/main_count.js"></script>
  </body>
</html>
